<template>
  <view class="withdraw-application-page">
	  <view class="bottomcolor"></view>
    <!-- 提现表单区域 -->
    <view class="form-section">
      <view class="form-item">
        <text class="item-label">账户余额</text>
        <text class="item-value">¥1500.00</text>
      </view>
      <view class="form-item">
        <text class="item-label">提现金额</text>
        <input 
          class="item-input" 
          type="number" 
          placeholder="请输入提现金额" 
          placeholder-style="color: #ccc;"
        />
        <text class="unit">元</text>
      </view>
      <view class="form-item">
        <text class="item-label">真实姓名</text>
        <input 
          class="item-input" 
          type="text" 
          placeholder="请输入真实姓名" 
          placeholder-style="color: #ccc;"
        />
      </view>
      <view class="form-item">
        <text class="item-label">请选择银行</text>
        <picker 
          mode="selector" 
          :range="bankList" 
          @change="handleBankChange"
        >
          <view class="picker-view">
            {{ selectedBank || '请选择银行' }}
          </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="item-label">请输入银行卡号</text>
        <input 
          class="item-input" 
          type="text" 
          placeholder="请输入银行卡号" 
          placeholder-style="color: #ccc;"
        />
      </view>
      <view class="tip">
        车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写
      </view>
      <button class="submit-btn" @click="handleSubmit">确认信息并提交</button>
    </view>
    <!-- 提现记录区域 -->
    <view class="records-section">
      <view class="section-title">提现记录</view>
      <view 
        class="record-item" 
        v-for="(item, index) in withdrawRecords" 
        :key="index"
      >
        <view class="record-desc">
          <text class="desc-text">{{ item.desc }}</text>
          <text class="amount" :style="{ color: item.amountColor }">{{ item.amount }}</text>
        </view>
        <view class="record-info">
          <text class="time">{{ item.time }}</text>
          <text class="status" :style="{ color: item.statusColor }">{{ item.status }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bankList: ['中国银行', '工商银行', '农业银行', '建设银行', '交通银行'], // 模拟银行列表
      selectedBank: '', // 选中的银行
      withdrawRecords: [
        {
          desc: '商家提现申请',
          amount: '- 100.00',
          amountColor: '#f00',
          time: '核销时间:2022-10-12 11:09',
          status: '审核中',
          statusColor: '#ff9900'
        },
        {
          desc: '商家提现申请',
          amount: '- 100.00',
          amountColor: '#f00',
          time: '核销时间:2022-10-12 11:09',
          status: '审核通过',
          statusColor: '#00cc00'
        },
        {
          desc: '商家提现申请',
          amount: '- 100.00',
          amountColor: '#f00',
          time: '核销时间:2022-10-12 11:09',
          status: '审核不通过',
          statusColor: '#ff0000'
        }
      ] // 模拟提现记录数据
    };
  },
  methods: {
    onBack() {
      // 返回上一页
      uni.navigateBack({
        delta: 1
      });
    },
    handleBankChange(e) {
      const index = e.detail.value;
      this.selectedBank = this.bankList[index];
    },
    handleSubmit() {
      // 可扩展提交逻辑，这里先简单提示
      uni.showToast({
        title: '提交功能暂未实现',
        icon: 'none',
        duration: 2000
      });
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.withdraw-application-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-size: 14px;
  color: #333;
  position: relative;
  z-index: 1;
}
.bottomcolor{
	background-color: #3399ff;
	height: 300rpx;
	width: 100%;
	z-index: 2;
	position: absolute;
}
/* 提现表单区域样式 */
.form-section {
  background-color: #fff;
  margin: 10px;
  border-radius: 5px;
  padding: 15px;
  position: absolute;
  z-index: 3;
}
.form-item {
  display: flex;
  /* 去掉垂直居中，改为顶部对齐 */
  justify-content: flex-start; 
  margin-bottom: 15px;
}
.item-label {
  width: 100px; /* 按需调整宽度，适配靠左布局 */
  text-align: left; /* 标签文字居左 */
  margin-right: 10px;
}
.item-value {
  color: #f00;
  font-weight: bold;
}
.item-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 10px; /* 用 padding 撑开高度，更自然 */
}
.unit {
  margin-left: 5px;
  color: #999;
}
.picker-view {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 8px 10px; /* 同 input，保持垂直间距一致 */
  color: #999;
}
.tip {
  font-size: 20rpx;
  color: #999;
  margin: 10px 0;
  text-align: center; /* 提示文字居左 */
}
.submit-btn {
  width: 90%;
  height: 44px;
  line-height: 44px;
  background-color: #3399ff;
  color: #fff;
  font-size: 16px;
  border-radius: 20px;
  border: none;
}
/* 提现记录区域样式（保持原样式即可，若需调整可同步改） */
.records-section {
  background-color: #fff;
  margin: 405px 2%  100px 2%;
  width: 96%;
  border-radius: 5px;
  padding: 15px;
  box-sizing: border-box;
  position: absolute;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-left: 3px solid #1296db;
  padding-left: 5px;
}
.record-item {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
}
.record-desc {
  display: flex;
  flex-direction: column;
}
.desc-text {
  margin-bottom: 5px;
}
.amount {
  color: #f00;
}
.record-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.time {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}
.status {
  font-size: 12px;
}
</style>